<template>
	<view style="width: 100vw;height: 100vh;background-size:100%;font-size: 14upx;">
		
		<view class="gerenxinxi" style="position: fixed;top:0;width: 100%;z-index:999">
			<u-subsection :list="list" :current="curNow" mode="button" activeColor="#9f7b5b" @change="sectionChange"></u-subsection>
		</view>
		<!--<view @tap="opendweb()"><u-button>123</u-button></view>-->
		<view class="content" style="margin-top: 8.5vw;" v-for="yiji in bigtab" :key="yiji.id">
			<view class="juzhong1" v-if="curNow === yiji.id">
				<view>
					<view style="background-color: #f5f5f5;width: 30%;height: 100vh;font-size: 28upx;position: fixed;z-index: 99999;">
						<view style="text-align: center;background-image: linear-gradient(to right, #362517 , #c1946e, #9f7b5b);color: #f5e6de;font-weight: 350;" v-for="tab in tabinfo" :key="tab.id">
							<view @click="clicksort(tab.mark,yiji.id)" style="height: 10vw;line-height: 10vw;margin-bottom: 2px;" :class='isShowtab==tab.mark?"current":""'>{{tab.title}}</view>
						</view>
						
						
					</view>
					
					<scroll-view scroll-y="true" :scroll-into-view="intoView" scroll-with-animation="true" @scroll="scroll" style="height: 100vh">
					<view style="background-color:;width: 70%;height: auto;margin-left:30%;" v-for="tab in tabinfo" :key="tab.id">
						
						<view style="height: 1vw;width: 100%;" id="box" ref="btn"></view>
						<view style="width: 70%;margin-left: 15%;float: left;" :id='"text"+tab.mark'>
							<u-divider
							        :text = 'tab.title'
									textSize="16"
							        textColor="#000"
							        lineColor="#000"
							></u-divider>
						</view>
						
						<view style="width: 33.3vw;background-color: #fff;float: left;margin-left:1vw;margin-top: 10upx;" v-for="item in items" :key="item.id">
							<view style="padding-bottom: 25px;width: 33.3vw;">
								<view style="width: 33.3vw;background-color:#ffffff;height:33.3vw;border-radius: 10upx;">
									<u--image :src=item.longImg width="33.3vw" height="33.3vw" shape="square" mode="aspectFit"></u--image>
								</view>
								<view style="line-height: 23px;font-size: 28upx;margin-top:6px">
									<view class="juzhong" style="font-size: 25upx;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{item.p_name}}</view>
									<!--
									<view style="width: 60%;margin-left: 20%;margin-top: 5px;">
										<u-button @click="openinfo(item.p_number)" type="primary" text="立即兑换" shape="circle" size="mini" color="#fff8e9" customStyle="color:#a3665e;box-shadow: 3px 3px 3px #888888;"></u-button>
									</view>-->
								</view>
							</view>
						</view>
						
						
						
						
					</view>
					</scroll-view>
					
				</view>
			</view>
			
			<!--<view class="juzhong1" v-if="curNow === 1">123</view>-->
			
			
			
		</view>
		
	<view ref="fff" style="top:999px;position:absolute;"></view>
	
	
	
	</view>
</template>
 
<script >
	export default {
		data() {
			return {
				tabinfo:[],
				list: [],
				curNow: 0,
				items: [],
				isShowtab: 0,
				intoView: '',
				bigtab:[],
				box_top:0,
				i_arr:[]
			}
		},
		onLoad(e) {
			//options: { styleIsolation: 'shared' }
			
			uni.showLoading({
				title: '加载中..',
				mask: false
			});
			setTimeout(function(){
				uni.hideLoading()
			},1000);
			
			
			

		},
		onReady(){
			//console.log(e)
			
			/*
			this.$nextTick(() => {
			        this.getInfo()
			      });
				  //onReady
			*/
			
			
			
		},
		methods: {
			getInfo() {
				// 注意：想要拿到元素实例，需要在实例已经挂载到页面上才可以
				/*
				const query = uni.createSelectorQuery().in(this);
				query.select('#text3').boundingClientRect(data => {
					console.log('第一个：'+data.top)
				}).exec();
				
				query.select('#text4').boundingClientRect(data => {
					console.log('第二个：'+data.top)
				}).exec();
				
				query.select('#text5').boundingClientRect(data => {
					console.log('第三个：'+data.top)
				}).exec();*/
				const query_box = uni.createSelectorQuery().in(this);
				query_box.select('#box').boundingClientRect(data => {
					this.box_top = data.top;
				}).exec();
				
				var i_arr = [];
				for(var i = 0;i< this.tabinfo.length;i++){
					console.log(this.tabinfo[i]['mark'])
					const query = uni.createSelectorQuery().in(this);
					query.select('#text'+this.tabinfo[i]['mark']).boundingClientRect(data => {
						var i_top = data.top-(this.box_top+10);
						console.log('第'+i+'个：'+i_top)
						
						var obj = {
							'zuobiao':i_top,
							'dingwei':this.tabinfo[i]['mark']
						};
						i_arr.push(obj)
						
					}).exec();
				}
				this.i_arr = i_arr;
				//console.log(i_arr)
				
				/*
				const query = uni.createSelectorQuery().in(this);
				for(var i = 3;i< 6;i++){
					console.log(i)
					query.select('#text'+i).boundingClientRect(data => {
						console.log('第一个：'+data.top)
					}).exec();
				}*/
				

			},
			sectionChange(index) {
				this.getleimu(index);
				this.curNow = index;
				console.log(index)
			},
			getleimu(e){
				uni.request({
					url: 'https://www.guoyunstore.com/weixin/api/newPersonal/getleimu.php',
					method: 'POST',
					data: {type: e},
					header: {
					        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					    },
					success: res => {
						//console.log(res.data.arr)
						//需要循环的数量及下标
						var bigtab = JSON.parse(res.data.lei_count) 
						this.bigtab = bigtab
						
						//一级类目
						var list = JSON.parse(res.data.arr) 
						this.list = list
						
						
						//二级类目
						var tabinfo = JSON.parse(res.data.arr2)
						this.tabinfo = tabinfo
						
						//选项卡初始位置
						var isShowtab = JSON.parse(res.data.arr3)
						this.isShowtab = isShowtab
						
						var that = this;
						this.$nextTick(() => {
							setTimeout(function(){
								that.getInfo()
							},100)
							
						});
						
						
						
						
					},
					fail: () => {
						console.log('erro')
					},
					complete: () => {}
				});
			},
			getawards(e){
				uni.request({
					url: 'https://www.guoyunstore.com/weixin/api/newPersonal/getawards.php',
					method: 'POST',
					data: {},
					header: {
					        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					    },
					success: res => {
						//console.log(res.data.arr)
						var awards = JSON.parse(res.data.arr) 
						this.items = awards
						
					},
					fail: () => {
						console.log('erro')
					},
					complete: () => {}
				});
			},
			clicksort(index,k){
				this.isShowtab = index
				console.log(index)
				this.intoView = "text" + index
				console.log(this.intoView)
				console.log(k)
				
			},
			scroll: function(e) {
				//console.log(e.detail.scrollTop)
				this.intoView = ''
				
				
				for(let i = 0;i<this.i_arr.length;i++){
					//console.log(this.i_arr[i])
					if(e.detail.scrollTop >= this.i_arr[i]['zuobiao']){
						this.isShowtab = this.i_arr[i]['dingwei']
					}
				}
				/*
				if(e.detail.scrollTop >= 0 && e.detail.scrollTop <790){
					this.isShowtab = 3
				}else if(e.detail.scrollTop >= 790 && e.detail.scrollTop <1576){
					this.isShowtab = 4
				}else if(e.detail.scrollTop >= 1576){
					this.isShowtab = 5
				}*/
				
			}
			
			   
			
		},
		created(){
			this.getawards();
			this.getleimu(0);
			
			
		}
	}
	
	
 
 
 
</script>

 <style>
	
	.juzhong{
		display: flex;
		justify-content: center;
	}
	
	.current {
		background-color: #fff;
		color: #b08865;
	}
	
	
 </style>